<!DOCTYPE html>
<html lang="en">
<head>
  <title>登录</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="static/css/login.css"/>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script> -->
  <script src="static/js/jquery-3.4.1.min.js"></script>
  <script src="static/js/jsencrypt.min.js"></script>
  <script src="static/js/axios.js"></script>
</head>
<body>
<div id="app">
  <div>
    <p style="font-size: 50px; color: #00b0ff;">登录</p>
    <p id="error_msg" style="color: #ff0000;text-align: center;height: 30px;margin: 0">{{error_msg}}</p>
  </div>
  <div>
    <form id="login-form" method="post" @submit.prevent="to_login">
      <table>
        <tr>
          <td><label for="name_input">用户名:</label></td>
          <td><input type="text" id="name_input" v-model="user_name" :class="get_class(1)"
                     @focus="remove_class(0)"
                     required/><br/></td>
        </tr>
        <tr>
          <td><label for="password_input">密码:</label></td>
          <td><input type="password" id="password_input" v-model="password"
                     :class="get_class(1)"
                     @focus="remove_class(1)"
                     required/><br/></td>
        </tr>
      </table>
      <input type="hidden" id="pub_key" v-model="pub_key" />
      <input type="submit" class="btn" value="登录" />
    </form>
    <button class="btn" @click="to_register">注册</button>
  </div>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="static/js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      domain: '',
      user_name: '',
      password: '',
      pub_key: '',
      error_msg: '',
      is_error: [false, false]
    },
    methods: {
      remove_class(e) {
        Vue.set(this.is_error, e, false);
      },
      to_register() {
        window.location = this.domain.concat('/register.html');
      },
      to_login() {
        let params = new FormData();
        params.append('username', this.user_name);
        params.append('password', this.password);
        axios.post(this.domain.concat('/login'), params, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.retCode === 0) {
            alert('登录成功');
            window.location = this.domain.concat('/mainPage.html');
          } else {
            this.error_msg = res.data.message;
          }
        }).catch((err) => {
          alert('未知错误');
        })
      },
      encrypt(s) {
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(this.pub_key);
        return encrypt.encrypt(s);
      },
      get_class(e) {
        return {
          normal: !this.is_error[e],
          error: this.is_error[e]
        };
      }
    },
    mounted() {
      this.domain = 'http://'.concat(document.domain);
    }
  })
</script>
</body>
</html>